<?php

/* @var $this yii\web\View */
use yii\helpers\Html;

$this->title = Yii::$app->name;

$css = <<<CSS
#chat span{overflow:hidden;box-sizing:border-box;margin:0;padding:0;width:100%;height:100%}
#chat .fa-2x{font-size:1.5em}
#chat .app{position:relative;top:19px;margin:auto;height:calc(100% - 38px)}
#chat .app,.app-one{overflow:hidden;padding:0;box-shadow:0 1px 1px 0 rgba(0,0,0,.06),0 2px 5px 0 rgba(0,0,0,.2)}
#chat .app-one{margin:0;height:100%;background-color:#f7f7f7}
#chat .side,.side-one{margin:0;padding:0;height:100%}
#chat .side-one{top:0;z-index:1;display:block}
#chat .side-one,.side-two{position:relative;width:100%}
#chat .side-two{top:-100%;left:-100%;z-index:2;margin:0;padding:0;height:100%;-webkit-transition:left .3s ease;transition:left .3s ease}
#chat .heading{z-index:1000;margin:0;padding:10px 1pc 10px 15px;width:100%;height:60px;background-color:#eee}
#chat .heading-avatar{padding:0;cursor:pointer}
#chat .heading-avatar-icon img{width:40px;height:40px;border-radius:50%}
#chat .heading-name{padding:0!important;cursor:pointer}
#chat .heading-name-meta{display:block;padding:5px;padding-bottom:0;color:#000;text-align:left;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:100%}
#chat .heading-online{display:none;padding:0 5px;color:#93918f;font-size:9pt}
#chat .heading-compose{padding:0}
#chat .heading-compose i{padding:5px;color:#93918f;text-align:center;cursor:pointer}
#chat .heading-dot{margin-left:10px;padding:0}
#chat .heading-dot i{padding:5px;color:#93918f;text-align:right;cursor:pointer}
#chat .searchBox{margin:0!important;padding:0!important;width:100%;height:60px}
#chat .searchBox-inner{padding:10px!important;width:100%;height:100%;background-color:#fbfbfb}
#chat .searchBox-inner input:focus{outline:0;border:none;box-shadow:none}
#chat .sideBar{overflow-y:auto;margin:0!important;padding:0!important;height:calc(100% - 90pt);border:1px solid #f7f7f7;background-color:#fff}
#chat .sideBar-body{position:relative;margin:0!important;padding:10px!important;height:72px;border-bottom:1px solid #f7f7f7;cursor:pointer}
#chat .sideBar-body:hover{background-color:#f2f2f2}
#chat .sideBar-avatar{padding:0!important;text-align:center}
#chat .avatar-icon img{width:49px;height:49px;border-radius:50%}
#chat .sideBar-main,.sideBar-main .row{padding:0!important}
#chat .sideBar-main .row{margin:0!important}
#chat .sideBar-name{padding:10px!important}
#chat .name-meta{padding:1%!important;color:#000;text-align:left;text-overflow:ellipsis;white-space:nowrap;font-size:100%}
#chat .sideBar-time{padding:10px!important}
#chat .time-meta{padding:1%!important;color:rgba(0,0,0,.4);vertical-align:baseline;text-align:right;font-size:9pt}
#chat .newMessage{position:relative;left:-100%;margin:0!important;padding:0!important;height:100%}
#chat .newMessage-heading{padding:10px 1pc 10px 15px!important;height:75pt;background-color:#00bfa5}
#chat .newMessage-heading,.newMessage-main{z-index:1001;margin:0!important;width:100%}
#chat .newMessage-main{margin-top:30px!important;padding:10px 1pc 0 15px!important;height:60px;color:#fff}
#chat .newMessage-title{padding:10px 5px!important;font-weight:700;font-size:18px}
#chat .newMessage-back{display:block;padding:9pt 5px!important;vertical-align:baseline;text-align:center;cursor:pointer}
#chat .newMessage-back i{margin:auto!important}
#chat .composeBox{margin:0!important;padding:0!important;width:100%;height:60px}
#chat .composeBox-inner{padding:10px!important;width:100%;height:100%;background-color:#fbfbfb}
#chat .composeBox-inner input:focus{outline:0;border:none;box-shadow:none}
#chat .compose-sideBar{overflow-y:auto;height:calc(100% - 10pc);border:1px solid #f7f7f7;background-color:#fff}
#chat .compose-sideBar,.conversation{margin:0!important;padding:0!important}
#chat .conversation{height:100%;border-left:1px solid rgba(0,0,0,.08)}
#chat .message{overflow-y:auto;height:calc(100% - 90pt);border:1px solid #f7f7f7;background:url(w.jpg) no-repeat fixed center;background-size:cover}
#chat .message,.message-previous{margin:0!important;padding:0!important}
#chat .message-previous{width:100%;height:auto}
#chat .previous{padding:10px!important;text-align:center;font-size:15px;cursor:pointer}
#chat .previous a{text-decoration:none;font-weight:700}
#chat .message-body{margin:0!important;padding:0!important;width:auto;height:auto}
#chat .message-main-receiver{max-width:60%}
#chat .message-main-sender{margin-left:40%!important;padding:3px 20px!important;max-width:60%}
#chat .message-text{margin:0!important;padding:5px!important;padding-bottom:0!important;word-wrap:break-word;font-weight:200;font-size:14px}
#chat .message-time{margin:0!important;margin-left:50px!important;color:#9a9a9a;text-align:right;font-size:9pt}
#chat .receiver{border-radius:10px 10px 10px 0;background:#fff}
#chat .receiver,.sender{display:inline-block;padding:4px 10px 7px!important;width:auto!important;text-shadow:0 1px 1px rgba(0,0,0,.2);word-wrap:break-word;font-size:9pt}
#chat .sender{float:right;border-radius:10px 10px 0 10px;background:#dcf8c6}
#chat .reply{z-index:1000;margin:0!important;padding:10px 5px!important;width:100%;height:60px;background-color:#f5f1ee}
#chat .reply-emojis,.reply-emojis i{padding:5px!important}
#chat .reply-emojis i{color:#93918f;text-align:center;cursor:pointer}
#chat .reply-recording,.reply-recording i{padding:5px!important}
#chat .reply-recording i{color:#93918f;text-align:center;cursor:pointer}
#chat .reply-send,.reply-send i{padding:5px!important}
#chat .reply-send i{color:#93918f;text-align:center;cursor:pointer}
#chat .reply-main{padding:2px 5px!important}
#chat .reply-main textarea{overflow:hidden;padding:5px!important;width:100%;height:100%;font-size:1pc;resize:none}
#chat .reply-main textarea,.reply-main textarea:focus{outline:0;border:none;box-shadow:none;text-indent:5px}
#chat @media screen and (max-width:700px){.app{top:0;height:100%}
#chat .heading{height:70px;background-color:#009688}
#chat .fa-2x{font-size:2.3em!important}
#chat .heading-avatar{padding:0!important}
#chat .heading-avatar-icon img{width:50px;height:50px}
#chat .heading-compose{padding:5px!important}
#chat .heading-compose i{color:#fff;cursor:pointer}
#chat .heading-dot{margin-left:10px!important;padding:5px!important}
#chat .heading-dot i{color:#fff;cursor:pointer}
#chat .sideBar{height:calc(100% - 130px)}
#chat .sideBar-body{height:5pc}
#chat .sideBar-avatar{padding:0 8px!important;text-align:left}
#chat .avatar-icon img{width:55px;height:55px}
#chat .sideBar-main,.sideBar-main .row{padding:0!important}
#chat .sideBar-main .row{margin:0!important}
#chat .sideBar-name{padding:10px 5px!important}
#chat .name-meta{padding:5%!important;font-size:1pc}
#chat .sideBar-time{padding:10px!important}
#chat .time-meta{padding:4%!important;color:rgba(0,0,0,.4);vertical-align:baseline;text-align:right;font-size:14px}
#chat .conversation{margin:0!important;padding:0!important;height:100%;border-left:1px solid rgba(0,0,0,.08)}
#chat .message{height:calc(100% - 140px)}
#chat .reply{height:70px}
#chat .reply-emojis{padding:5px 0!important}
#chat .reply-emojis i{padding:5px 2px!important;font-size:1.8em!important}
#chat .reply-main{padding:2px 8px!important}
#chat .reply-main textarea{padding:8px!important;font-size:18px}
#chat .reply-recording,.reply-recording i{padding:5px 0!important}
#chat .reply-recording i{font-size:1.8em!important}
#chat .reply-send{padding:5px 0!important}
#chat .reply-send i{padding:5px 2px 5px 0!important;font-size:1.8em!important}
#chat }
#chat span{overflow:hidden;box-sizing:border-box;margin:0;padding:0;width:100%;height:100%}
#chat .fa-2x{font-size:1.5em}
#chat .app{position:relative;top:19px;margin:auto;height:calc(100% - 38px)}
#chat .app,.app-one{overflow:hidden;padding:0;box-shadow:0 1px 1px 0 rgba(0,0,0,.06),0 2px 5px 0 rgba(0,0,0,.2)}
#chat .app-one{margin:0;height:100%;background-color:#f7f7f7}
#chat .side,.side-one{margin:0;padding:0;height:100%}
#chat .side-one{top:0;z-index:1;display:block}
#chat .side-one,.side-two{position:relative;width:100%}
#chat .side-two{top:-100%;left:-100%;z-index:2;margin:0;padding:0;height:100%;-webkit-transition:left .3s ease;transition:left .3s ease}
#chat .heading{z-index:1000;margin:0;padding:10px 1pc 10px 15px;width:100%;height:60px;background-color:#eee}
#chat .heading-avatar{padding:0;cursor:pointer}
#chat .heading-avatar-icon img{width:40px;height:40px;border-radius:50%}
#chat .heading-name{padding:0!important;cursor:pointer}
#chat .heading-name-meta{display:block;padding:5px;padding-bottom:0;color:#000;text-align:left;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:100%}
#chat .heading-online{display:none;padding:0 5px;color:#93918f;font-size:9pt}
#chat .heading-compose{padding:0}
#chat .heading-compose i{padding:5px;color:#93918f;text-align:center;cursor:pointer}
#chat .heading-dot{margin-left:10px;padding:0}
#chat .heading-dot i{padding:5px;color:#93918f;text-align:right;cursor:pointer}
#chat .searchBox{margin:0!important;padding:0!important;width:100%;height:60px}
#chat .searchBox-inner{padding:10px!important;width:100%;height:100%;background-color:#fbfbfb}
#chat .searchBox-inner input:focus{outline:0;border:none;box-shadow:none}
#chat .sideBar{overflow-y:auto;margin:0!important;padding:0!important;height:calc(100% - 90pt);border:1px solid #f7f7f7;background-color:#fff}
#chat .sideBar-body{position:relative;margin:0!important;padding:10px!important;height:72px;border-bottom:1px solid #f7f7f7;cursor:pointer}
#chat .sideBar-body:hover{background-color:#f2f2f2}
#chat .sideBar-avatar{padding:0!important;text-align:center}
#chat .avatar-icon img{width:49px;height:49px;border-radius:50%}
#chat .sideBar-main,.sideBar-main .row{padding:0!important}
#chat .sideBar-main .row{margin:0!important}
#chat .sideBar-name{padding:10px!important}
#chat .name-meta{padding:1%!important;color:#000;text-align:left;text-overflow:ellipsis;white-space:nowrap;font-size:100%}
#chat .sideBar-time{padding:10px!important}
#chat .time-meta{padding:1%!important;color:rgba(0,0,0,.4);vertical-align:baseline;text-align:right;font-size:9pt}
#chat .newMessage{position:relative;left:-100%;margin:0!important;padding:0!important;height:100%}
#chat .newMessage-heading{padding:10px 1pc 10px 15px!important;height:75pt;background-color:#00bfa5}
#chat .newMessage-heading,.newMessage-main{z-index:1001;margin:0!important;width:100%}
#chat .newMessage-main{margin-top:30px!important;padding:10px 1pc 0 15px!important;height:60px;color:#fff}
#chat .newMessage-title{padding:10px 5px!important;font-weight:700;font-size:18px}
#chat .newMessage-back{display:block;padding:9pt 5px!important;vertical-align:baseline;text-align:center;cursor:pointer}
#chat .newMessage-back i{margin:auto!important}
#chat .composeBox{margin:0!important;padding:0!important;width:100%;height:60px}
#chat .composeBox-inner{padding:10px!important;width:100%;height:100%;background-color:#fbfbfb}
#chat .composeBox-inner input:focus{outline:0;border:none;box-shadow:none}
#chat .compose-sideBar{overflow-y:auto;height:calc(100% - 10pc);border:1px solid #f7f7f7;background-color:#fff}
#chat .compose-sideBar,.conversation{margin:0!important;padding:0!important}
#chat .conversation{height:100%;border-left:1px solid rgba(0,0,0,.08)}
#chat .message{overflow-y:auto;height:calc(100% - 90pt);border:1px solid #f7f7f7;background:url(w.jpg) no-repeat fixed center;background-size:cover}
#chat .message,.message-previous{margin:0!important;padding:0!important}
#chat .message-previous{width:100%;height:auto}
#chat .previous{padding:10px!important;text-align:center;font-size:15px;cursor:pointer}
#chat .previous a{text-decoration:none;font-weight:700}
#chat .message-body{margin:0!important;padding:0!important;width:auto;height:auto}
#chat .message-main-receiver{max-width:60%}
#chat .message-main-sender{margin-left:40%!important;padding:3px 20px!important;max-width:60%}
#chat .message-text{margin:0!important;padding:5px!important;padding-bottom:0!important;word-wrap:break-word;font-weight:200;font-size:14px}
#chat .message-time{margin:0!important;margin-left:50px!important;color:#9a9a9a;text-align:right;font-size:9pt}
#chat .receiver{border-radius:10px 10px 10px 0;background:#fff}
#chat .receiver,.sender{display:inline-block;padding:4px 10px 7px!important;width:auto!important;text-shadow:0 1px 1px rgba(0,0,0,.2);word-wrap:break-word;font-size:9pt}
#chat .sender{float:right;border-radius:10px 10px 0 10px;background:#dcf8c6}
#chat .reply{z-index:1000;margin:0!important;padding:10px 5px!important;width:100%;height:60px;background-color:#f5f1ee}
#chat .reply-emojis,.reply-emojis i{padding:5px!important}
#chat .reply-emojis i{color:#93918f;text-align:center;cursor:pointer}
#chat .reply-recording,.reply-recording i{padding:5px!important}
#chat .reply-recording i{color:#93918f;text-align:center;cursor:pointer}
#chat .reply-send,.reply-send i{padding:5px!important}
#chat .reply-send i{color:#93918f;text-align:center;cursor:pointer}
#chat .reply-main{padding:2px 5px!important}
#chat .reply-main textarea{overflow:hidden;padding:5px!important;width:100%;height:100%;font-size:1pc;resize:none}
#chat .reply-main textarea,.reply-main textarea:focus{outline:0;border:none;box-shadow:none;text-indent:5px}
#chat @media screen and (max-width:700px){.app{top:0;height:100%}
#chat .heading{height:70px;background-color:#009688}
#chat .fa-2x{font-size:2.3em!important}
#chat .heading-avatar{padding:0!important}
#chat .heading-avatar-icon img{width:50px;height:50px}
#chat .heading-compose{padding:5px!important}
#chat .heading-compose i{color:#fff;cursor:pointer}
#chat .heading-dot{margin-left:10px!important;padding:5px!important}
#chat .heading-dot i{color:#fff;cursor:pointer}
#chat .sideBar{height:calc(100% - 130px)}
#chat .sideBar-body{height:5pc}
#chat .sideBar-avatar{padding:0 8px!important;text-align:left}
#chat .avatar-icon img{width:55px;height:55px}
#chat .sideBar-main,.sideBar-main .row{padding:0!important}
#chat .sideBar-main .row{margin:0!important}
#chat .sideBar-name{padding:10px 5px!important}
#chat .name-meta{padding:5%!important;font-size:1pc}
#chat .sideBar-time{padding:10px!important}
#chat .time-meta{padding:4%!important;color:rgba(0,0,0,.4);vertical-align:baseline;text-align:right;font-size:14px}
#chat .conversation{margin:0!important;padding:0!important;height:100%;border-left:1px solid rgba(0,0,0,.08)}
#chat .message{height:calc(100% - 140px)}
#chat .reply{height:70px}
#chat .reply-emojis{padding:5px 0!important}
#chat .reply-emojis i{padding:5px 2px!important;font-size:1.8em!important}
#chat .reply-main{padding:2px 8px!important}
#chat .reply-main textarea{padding:8px!important;font-size:18px}
#chat .reply-recording,.reply-recording i{padding:5px 0!important}
#chat .reply-recording i{font-size:1.8em!important}
#chat .reply-send{padding:5px 0!important}
#chat .reply-send i{padding:5px 2px 5px 0!important;font-size:1.8em!important}
#chat }

CSS;
$this->registerCss($css);
?>

<div class="site-chat">
    <div class="row app-one" id="chat">
        <div class="col-sm-4 side">
            <div class="side-one">
                <div class="row heading">
                    <div class="col-sm-3 col-xs-3 heading-avatar">
                        <div class="heading-avatar-icon">
                            <img src="https://bootdey.com/img/Content/avatar/avatar1.png">
                        </div>
                    </div>
                    <div class="col-sm-1 col-xs-1  heading-dot  pull-right">
                        <i class="fa fa-ellipsis-v fa-2x  pull-right" aria-hidden="true"></i>
                    </div>
                    <div class="col-sm-2 col-xs-2 heading-compose  pull-right">
                        <i class="fa fa-comments fa-2x  pull-right" aria-hidden="true"></i>
                    </div>
                </div>

                <div class="row searchBox">
                    <div class="col-sm-12 searchBox-inner">
                        <div class="form-group has-feedback">
                            <input id="searchText" type="text" class="form-control" name="searchText" placeholder="Search">
                            <span class="glyphicon glyphicon-search form-control-feedback"></span>
                        </div>
                    </div>
                </div>

                <div class="row sideBar">
                    <div class="row sideBar-body">
                        <div class="col-sm-3 col-xs-3 sideBar-avatar">
                            <div class="avatar-icon">
                                <img src="https://bootdey.com/img/Content/avatar/avatar1.png">
                            </div>
                        </div>
                        <div class="col-sm-9 col-xs-9 sideBar-main">
                            <div class="row">
                                <div class="col-sm-8 col-xs-8 sideBar-name">
                  <span class="name-meta">John Doe
                </span>
                                </div>
                                <div class="col-sm-4 col-xs-4 pull-right sideBar-time">
                  <span class="time-meta pull-right">18:18
                </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row sideBar-body">
                        <div class="col-sm-3 col-xs-3 sideBar-avatar">
                            <div class="avatar-icon">
                                <img src="https://bootdey.com/img/Content/avatar/avatar2.png">
                            </div>
                        </div>
                        <div class="col-sm-9 col-xs-9 sideBar-main">
                            <div class="row">
                                <div class="col-sm-8 col-xs-8 sideBar-name">
                  <span class="name-meta">John Doe
                </span>
                                </div>
                                <div class="col-sm-4 col-xs-4 pull-right sideBar-time">
                  <span class="time-meta pull-right">18:18
                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row sideBar-body">
                        <div class="col-sm-3 col-xs-3 sideBar-avatar">
                            <div class="avatar-icon">
                                <img src="https://bootdey.com/img/Content/avatar/avatar3.png">
                            </div>
                        </div>
                        <div class="col-sm-9 col-xs-9 sideBar-main">
                            <div class="row">
                                <div class="col-sm-8 col-xs-8 sideBar-name">
                  <span class="name-meta">John Doe
                </span>
                                </div>
                                <div class="col-sm-4 col-xs-4 pull-right sideBar-time">
                  <span class="time-meta pull-right">18:18
                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row sideBar-body">
                        <div class="col-sm-3 col-xs-3 sideBar-avatar">
                            <div class="avatar-icon">
                                <img src="https://bootdey.com/img/Content/avatar/avatar4.png">
                            </div>
                        </div>
                        <div class="col-sm-9 col-xs-9 sideBar-main">
                            <div class="row">
                                <div class="col-sm-8 col-xs-8 sideBar-name">
                  <span class="name-meta">John Doe
                </span>
                                </div>
                                <div class="col-sm-4 col-xs-4 pull-right sideBar-time">
                  <span class="time-meta pull-right">18:18
                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row sideBar-body">
                        <div class="col-sm-3 col-xs-3 sideBar-avatar">
                            <div class="avatar-icon">
                                <img src="https://bootdey.com/img/Content/avatar/avatar5.png">
                            </div>
                        </div>
                        <div class="col-sm-9 col-xs-9 sideBar-main">
                            <div class="row">
                                <div class="col-sm-8 col-xs-8 sideBar-name">
                  <span class="name-meta">John Doe
                </span>
                                </div>
                                <div class="col-sm-4 col-xs-4 pull-right sideBar-time">
                  <span class="time-meta pull-right">18:18
                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row sideBar-body">
                        <div class="col-sm-3 col-xs-3 sideBar-avatar">
                            <div class="avatar-icon">
                                <img src="https://bootdey.com/img/Content/avatar/avatar6.png">
                            </div>
                        </div>
                        <div class="col-sm-9 col-xs-9 sideBar-main">
                            <div class="row">
                                <div class="col-sm-8 col-xs-8 sideBar-name">
                  <span class="name-meta">John Doe
                </span>
                                </div>
                                <div class="col-sm-4 col-xs-4 pull-right sideBar-time">
                  <span class="time-meta pull-right">18:18
                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row sideBar-body">
                        <div class="col-sm-3 col-xs-3 sideBar-avatar">
                            <div class="avatar-icon">
                                <img src="https://bootdey.com/img/Content/avatar/avatar1.png">
                            </div>
                        </div>
                        <div class="col-sm-9 col-xs-9 sideBar-main">
                            <div class="row">
                                <div class="col-sm-8 col-xs-8 sideBar-name">
                  <span class="name-meta">John Doe
                </span>
                                </div>
                                <div class="col-sm-4 col-xs-4 pull-right sideBar-time">
                  <span class="time-meta pull-right">18:18
                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row sideBar-body">
                        <div class="col-sm-3 col-xs-3 sideBar-avatar">
                            <div class="avatar-icon">
                                <img src="https://bootdey.com/img/Content/avatar/avatar2.png">
                            </div>
                        </div>
                        <div class="col-sm-9 col-xs-9 sideBar-main">
                            <div class="row">
                                <div class="col-sm-8 col-xs-8 sideBar-name">
                  <span class="name-meta">John Doe
                </span>
                                </div>
                                <div class="col-sm-4 col-xs-4 pull-right sideBar-time">
                  <span class="time-meta pull-right">18:18
                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row sideBar-body">
                        <div class="col-sm-3 col-xs-3 sideBar-avatar">
                            <div class="avatar-icon">
                                <img src="https://bootdey.com/img/Content/avatar/avatar3.png">
                            </div>
                        </div>
                        <div class="col-sm-9 col-xs-9 sideBar-main">
                            <div class="row">
                                <div class="col-sm-8 col-xs-8 sideBar-name">
                  <span class="name-meta">John Doe
                </span>
                                </div>
                                <div class="col-sm-4 col-xs-4 pull-right sideBar-time">
                  <span class="time-meta pull-right">18:18
                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row sideBar-body">
                        <div class="col-sm-3 col-xs-3 sideBar-avatar">
                            <div class="avatar-icon">
                                <img src="https://bootdey.com/img/Content/avatar/avatar4.png">
                            </div>
                        </div>
                        <div class="col-sm-9 col-xs-9 sideBar-main">
                            <div class="row">
                                <div class="col-sm-8 col-xs-8 sideBar-name">
                  <span class="name-meta">John Doe
                </span>
                                </div>
                                <div class="col-sm-4 col-xs-4 pull-right sideBar-time">
                  <span class="time-meta pull-right">18:18
                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="side-two">
                <div class="row newMessage-heading">
                    <div class="row newMessage-main">
                        <div class="col-sm-2 col-xs-2 newMessage-back">
                            <i class="fa fa-arrow-left" aria-hidden="true"></i>
                        </div>
                        <div class="col-sm-10 col-xs-10 newMessage-title">
                            New Chat
                        </div>
                    </div>
                </div>

                <div class="row composeBox">
                    <div class="col-sm-12 composeBox-inner">
                        <div class="form-group has-feedback">
                            <input id="composeText" type="text" class="form-control" name="searchText" placeholder="Search People">
                            <span class="glyphicon glyphicon-search form-control-feedback"></span>
                        </div>
                    </div>
                </div>

                <div class="row compose-sideBar">
                    <div class="row sideBar-body">
                        <div class="col-sm-3 col-xs-3 sideBar-avatar">
                            <div class="avatar-icon">
                                <img src="https://bootdey.com/img/Content/avatar/avatar1.png">
                            </div>
                        </div>
                        <div class="col-sm-9 col-xs-9 sideBar-main">
                            <div class="row">
                                <div class="col-sm-8 col-xs-8 sideBar-name">
                  <span class="name-meta">John Doe
                </span>
                                </div>
                                <div class="col-sm-4 col-xs-4 pull-right sideBar-time">
                  <span class="time-meta pull-right">18:18
                </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row sideBar-body">
                        <div class="col-sm-3 col-xs-3 sideBar-avatar">
                            <div class="avatar-icon">
                                <img src="https://bootdey.com/img/Content/avatar/avatar2.png">
                            </div>
                        </div>
                        <div class="col-sm-9 col-xs-9 sideBar-main">
                            <div class="row">
                                <div class="col-sm-8 col-xs-8 sideBar-name">
                  <span class="name-meta">John Doe
                </span>
                                </div>
                                <div class="col-sm-4 col-xs-4 pull-right sideBar-time">
                  <span class="time-meta pull-right">18:18
                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row sideBar-body">
                        <div class="col-sm-3 col-xs-3 sideBar-avatar">
                            <div class="avatar-icon">
                                <img src="https://bootdey.com/img/Content/avatar/avatar3.png">
                            </div>
                        </div>
                        <div class="col-sm-9 col-xs-9 sideBar-main">
                            <div class="row">
                                <div class="col-sm-8 col-xs-8 sideBar-name">
                  <span class="name-meta">John Doe
                </span>
                                </div>
                                <div class="col-sm-4 col-xs-4 pull-right sideBar-time">
                  <span class="time-meta pull-right">18:18
                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row sideBar-body">
                        <div class="col-sm-3 col-xs-3 sideBar-avatar">
                            <div class="avatar-icon">
                                <img src="https://bootdey.com/img/Content/avatar/avatar4.png">
                            </div>
                        </div>
                        <div class="col-sm-9 col-xs-9 sideBar-main">
                            <div class="row">
                                <div class="col-sm-8 col-xs-8 sideBar-name">
                  <span class="name-meta">John Doe
                </span>
                                </div>
                                <div class="col-sm-4 col-xs-4 pull-right sideBar-time">
                  <span class="time-meta pull-right">18:18
                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row sideBar-body">
                        <div class="col-sm-3 col-xs-3 sideBar-avatar">
                            <div class="avatar-icon">
                                <img src="https://bootdey.com/img/Content/avatar/avatar5.png">
                            </div>
                        </div>
                        <div class="col-sm-9 col-xs-9 sideBar-main">
                            <div class="row">
                                <div class="col-sm-8 col-xs-8 sideBar-name">
                  <span class="name-meta">John Doe
                </span>
                                </div>
                                <div class="col-sm-4 col-xs-4 pull-right sideBar-time">
                  <span class="time-meta pull-right">18:18
                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row sideBar-body">
                        <div class="col-sm-3 col-xs-3 sideBar-avatar">
                            <div class="avatar-icon">
                                <img src="https://bootdey.com/img/Content/avatar/avatar6.png">
                            </div>
                        </div>
                        <div class="col-sm-9 col-xs-9 sideBar-main">
                            <div class="row">
                                <div class="col-sm-8 col-xs-8 sideBar-name">
                  <span class="name-meta">John Doe
                </span>
                                </div>
                                <div class="col-sm-4 col-xs-4 pull-right sideBar-time">
                  <span class="time-meta pull-right">18:18
                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row sideBar-body">
                        <div class="col-sm-3 col-xs-3 sideBar-avatar">
                            <div class="avatar-icon">
                                <img src="https://bootdey.com/img/Content/avatar/avatar2.png">
                            </div>
                        </div>
                        <div class="col-sm-9 col-xs-9 sideBar-main">
                            <div class="row">
                                <div class="col-sm-8 col-xs-8 sideBar-name">
                  <span class="name-meta">John Doe
                </span>
                                </div>
                                <div class="col-sm-4 col-xs-4 pull-right sideBar-time">
                  <span class="time-meta pull-right">18:18
                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row sideBar-body">
                        <div class="col-sm-3 col-xs-3 sideBar-avatar">
                            <div class="avatar-icon">
                                <img src="https://bootdey.com/img/Content/avatar/avatar3.png">
                            </div>
                        </div>
                        <div class="col-sm-9 col-xs-9 sideBar-main">
                            <div class="row">
                                <div class="col-sm-8 col-xs-8 sideBar-name">
                  <span class="name-meta">John Doe
                </span>
                                </div>
                                <div class="col-sm-4 col-xs-4 pull-right sideBar-time">
                  <span class="time-meta pull-right">18:18
                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row sideBar-body">
                        <div class="col-sm-3 col-xs-3 sideBar-avatar">
                            <div class="avatar-icon">
                                <img src="https://bootdey.com/img/Content/avatar/avatar4.png">
                            </div>
                        </div>
                        <div class="col-sm-9 col-xs-9 sideBar-main">
                            <div class="row">
                                <div class="col-sm-8 col-xs-8 sideBar-name">
                  <span class="name-meta">John Doe
                </span>
                                </div>
                                <div class="col-sm-4 col-xs-4 pull-right sideBar-time">
                  <span class="time-meta pull-right">18:18
                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row sideBar-body">
                        <div class="col-sm-3 col-xs-3 sideBar-avatar">
                            <div class="avatar-icon">
                                <img src="https://bootdey.com/img/Content/avatar/avatar5.png">
                            </div>
                        </div>
                        <div class="col-sm-9 col-xs-9 sideBar-main">
                            <div class="row">
                                <div class="col-sm-8 col-xs-8 sideBar-name">
                  <span class="name-meta">John Doe
                </span>
                                </div>
                                <div class="col-sm-4 col-xs-4 pull-right sideBar-time">
                  <span class="time-meta pull-right">18:18
                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-8 conversation">
            <div class="row heading">
                <div class="col-sm-2 col-md-1 col-xs-3 heading-avatar">
                    <div class="heading-avatar-icon">
                        <img src="https://bootdey.com/img/Content/avatar/avatar6.png">
                    </div>
                </div>
                <div class="col-sm-8 col-xs-7 heading-name">
                    <a class="heading-name-meta">John Doe
                    </a>
                    <span class="heading-online">Online</span>
                </div>
                <div class="col-sm-1 col-xs-1  heading-dot pull-right">
                    <i class="fa fa-ellipsis-v fa-2x  pull-right" aria-hidden="true"></i>
                </div>
            </div>

            <div class="row message" id="conversation">
                <div class="row message-previous">
                    <div class="col-sm-12 previous">
                        <a onclick="previous(this)" id="ankitjain28" name="20">
                            Show Previous Message!
                        </a>
                    </div>
                </div>

                <div class="row message-body">
                    <div class="col-sm-12 message-main-receiver">
                        <div class="receiver">
                            <div class="message-text">
                                Hi, what are you doing?!
                            </div>
                            <span class="message-time pull-right">
                Sun
              </span>
                        </div>
                    </div>
                </div>

                <div class="row message-body">
                    <div class="col-sm-12 message-main-sender">
                        <div class="sender">
                            <div class="message-text">
                                I am doing nothing man!
                            </div>
                            <span class="message-time pull-right">
                Sun
              </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row reply">
                <div class="col-sm-1 col-xs-1 reply-emojis">
                    <i class="fa fa-smile-o fa-2x"></i>
                </div>
                <div class="col-sm-9 col-xs-9 reply-main">
                    <textarea class="form-control" rows="1" id="comment"></textarea>
                </div>
                <div class="col-sm-1 col-xs-1 reply-recording">
                    <i class="fa fa-microphone fa-2x" aria-hidden="true"></i>
                </div>
                <div class="col-sm-1 col-xs-1 reply-send">
                    <i class="fa fa-send fa-2x" aria-hidden="true"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<?php \common\components\widgets\JsBlock::begin() ?>
    <script>
        $(function () {
            $(".heading-compose").click(function() {
                $(".side-two").css({
                    "left": "0"
                });
            });

            $(".newMessage-back").click(function() {
                $(".side-two").css({
                    "left": "-100%"
                });
            });
        });
        var wsIp = "<?php echo \common\config\Env::getSwooleWebsocketConf()['ip'] ?>";
        var wsPort = "<?php echo \common\config\Env::getSwooleWebsocketConf()['port'] ?>";
        /*var wsServer = 'ws://'+wsIp+':'+wsPort;
        var websocket = new WebSocket(wsServer);
        websocket.onopen = function (evt) {
            console.log("Connected to WebSocket server.");
            websocket.send('fasdfsadf');
        };
        websocket.onclose = function (evt) {
            console.log("Disconnected");
        };
        websocket.onmessage = function (evt) {
            console.log('Retrieved data from server: ' + evt.data);
        };
        websocket.onerror = function (evt, e) {
            console.log('Error occured: ' + evt.data);
        };*/
    </script>
<?php \common\components\widgets\JsBlock::end() ?>